<template>
	<view class="classlist">

		<view class="loadingLayout" v-if="!classList.length && !noData">
			<uni-load-more status="loading"></uni-load-more>
		</view>

		<view class="content">
			<navigator :url=" '/pages/preview/preview?id=' + item.id " class="item" v-for="item in classList"
				:key="item.id">
				<image :src="item.smallPicurl" mode="aspectFill"></image>
			</navigator>
		</view>

		<view class="loadingLayout" v-if="classList.length || noData">
			<uni-load-more :status="noData? 'noMore' : 'loading' "></uni-load-more>
		</view>

	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';

	import {
		onLoad,
		onReachBottom,
		onUnload
	} from "@dcloudio/uni-app"
	
	import {
		fixMinioUrl
	} from "@/utils/img-url.js"

	import {
		apiGetClassList
	} from "@/api/apis.js"
	const classList = ref([])
	const noData = ref(false)

	const queryParams = {
		pageNum: 1,
		pageSize: 12
	}

	const getClassList = async () => {
		const res = await apiGetClassList(queryParams)
		classList.value = [...classList.value, ...res.data?.list]
		if (queryParams.pageSize > res.data.list.length) noData.value = true
	}


	onLoad((e) => {

		let {
			id,
			name
		} = e

		queryParams.categoryId = id
		uni.setNavigationBarTitle({
			title: name
		})

		getClassList()
	})

	onReachBottom(() => {
		if (noData.value) return;
		queryParams.pageNum++
		getClassList()
	})
</script>

<style lang="scss" scoped>
	.classlist {
		.content {
			display: grid;
			grid-template-columns: repeat(3, 1fr);
			gap: 5rpx;
			padding: 5rpx;

			.item {
				height: 440rpx;

				image {
					width: 100%;
					height: 100%;
					display: block;

				}
			}
		}
	}
</style>